<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>16_伪元素选择器</title>
</head>
<style>
    /* 什么是伪元素----很像元素，但不是元素,是元素中的一些特殊位置 */

    /* 选中的是div的第一个文字 */
    div::first-letter {
        color: red;
        font-size: large;
    }
    /* 选中的是div的第一行文字 */
    div::first-line {
        background-color: yellow;
    }
    /* 选中div元素中鼠标选中文本时的背景颜色和字体颜色 */
    div::selection {
        background-color: green;
        color: yellow;
    }
    /* 选中的是p元素提示的文字 */
    input::placeholder {
        color: blue;
    }

    /* 选中的是p元素最开始的位置，随后创建元素 */
    p::before {
        content: "￥";
    }
    /* 选中的是p元素最后面的位置，随后创建元素 */
    p::after {
        content: ".00";
    }

</style>

<body>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni necessitatibus, cupiditate natus voluptatibus
        iste quo laudantium, totam obcaecati similique accusantium dignissimos nesciunt ab consequuntur debitis
        repudiandae ipsam quis dolorum corrupti deserunt animi molestiae facilis! Error voluptatem itaque sit, alias
        deserunt nam, nostrum corrupti laudantium facilis nesciunt reprehenderit laborum iusto dignissimos id ipsam
        nobis ullam temporibus cupiditate! Unde, eaque. Consequuntur, illum.
    </div>
    <br>
    <!-- placeholder占位符 -->
    用户名：<input type="text"  placeholder="请输入您的名字">
    <br>
    <p>199</p>
    <p>299</p>
    <p>399</p>
    <p>499</p>



</body>

</html>